import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { PlayerbarListItemWrapper } from './style';
import { formatTime } from '@/utils/format';
import { useAppDispatch } from '@/store/hooks';
import { changeCurrentSongByListIndex, setCurrentSong } from '@/views/player/store/player';
interface IProps {
  children?: ReactNode;
  isPlaying: boolean;
  song: any;
  currentIndex: number;
}

const PlayerbarListItem: FC<IProps> = (props) => {
  const { isPlaying, song, currentIndex } = props;
  const dispatch = useAppDispatch();
  // console.log(song);
  return (
    <PlayerbarListItemWrapper
      className={isPlaying ? 'play_active' : ''}
      onClick={() => {
        dispatch(setCurrentSong(song));
        dispatch(changeCurrentSongByListIndex(currentIndex));
      }}
    >
      <div className="play">
        <div className="sprite_playerList_icon"></div>
      </div>
      <div className="name">{song.name}</div>
      <div className="ctrl">
        <i title="收藏" className="sprite_playerList_icon like"></i>
        <i title="分享" className="sprite_playerList_icon share"></i>
        <i title="下载" className="sprite_playerList_icon download"></i>
        <i title="删除" className="sprite_playerList_icon delete"></i>
      </div>
      <div className="author">
        <a href="">{song.ar[0].name}</a>
      </div>
      <div className="time">{formatTime(song.dt / 1000)}</div>
      <div className="from">
        <a title="来自歌单" className="sprite_playerList_icon delete"></a>
      </div>
    </PlayerbarListItemWrapper>
  );
};

export default memo(PlayerbarListItem);
